<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
    <meta charset="utf-8">
    <title>用户--添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/components/layuiadmin/layui/src/css/layui.css">
    <script src="/components/layuiadmin/layui/src/layui.js"></script>
    <script src='/base/js/jquery-3.4.1.js'></script>
    <script src="/modules/js/app.js"></script>

    <!-- 文件上传插件 -->
    <link rel="stylesheet" href="/components/cropper/css/cropper.css" media="all">
    <link rel="stylesheet" href="/components/cropper/css/publish.css" media="all">
    <script src="/components/cropper/js/croppers.js"></script>
    <script src="/components/cropper/js/move.js"></script>
    <script src="/components/cropper/js/publishImg.js"></script>
    <script src="/components/cropper/js/cropper.js"></script>
    <!-- 文件上传插件 -->
</head>
<body>
<style>
    .layui-form-item .layui-input-inline {
        width: 300px;
    !important;
    }
</style>

<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">


    <div class="layui-form-item">
        <label class="layui-form-label">源站原始id</label>
        <div class="layui-input-inline">
            <input type="text" id="did" name="did" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-inline">
            <input type="text" id="cid" name="cid" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">主分类</label>
        <div class="layui-input-inline">
            <input type="text" id="zid" name="zid" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜谱标题</label>
        <div class="layui-input-inline">
            <input type="text" id="title" name="title" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
         <label class="layui-form-label">菜谱缩略图</label>
        <!--        <div class="layui-input-inline">-->
        <!--            <input type="text" id="thumb" name="thumb" placeholder="请输入" autocomplete="off" class="layui-input">-->
        <!--        </div>-->
        <span class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-danger" id="test7" style="width: 180px"><i class="layui-icon"></i>菜谱缩略图</button>
            <!-- 预览图,上传图片后展示 --><!--圆  style='border-radius: 30px;width: 35px;height: 35px;'-->
            <img src="" title="" id="thumbImg" style="/*border-radius: 0px;width: 180px;*/height: 180px; margin-top: 5%">
            <!-- 隐藏input,最后添加数据 -->
            <input type="text" id="thumb" name="thumb" placeholder="请输入" autocomplete="off" hidden>
        </span>
        <!-- 提示 -->
        <font class="layui-word-aux">
            必须小于 1M
        </font>


    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">视频简绍</label>
        <div class="layui-input-inline">
            <input type="text" id="videourl" name="videourl" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜谱简介</label>
        <div class="layui-input-inline">
            <input type="text" id="desc" name="desc" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">难度（0初级、1中级、3高级</label>
        <div class="layui-input-inline">
            <input type="text" id="difficulty" name="difficulty" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">耗时</label>
        <div class="layui-input-inline">
            <input type="text" id="costtime" name="costtime" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">提示</label>
        <div class="layui-input-block">
            <textarea style="height: 100px;" id="tip" name="tip" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">材料</label>
        <div class="layui-input-block">
            <textarea style="height: 200px;" id="yl" name="yl" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分量</label>
        <div class="layui-input-block">
            <textarea style="height: 200px;" id="fl" name="fl" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">步骤</label>
        <div class="layui-input-block">
            <textarea style="height: 200px;" id="steptext" name="steptext" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <!--<label class="layui-form-label">步骤图片，用#符号分隔</label>
        <div class="layui-input-inline">
            <input type="text" id="steppic" name="steppic" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>-->
        <!-- 文件上传插件 -->
        <div class="layui-tab layui-tab-card">
            <div class="layui-form" style="padding: 20px 0 0 0;">
                <div class="layui-form-item">
                    <label class="layui-form-label">图片上传</label>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn" id="addZmImg">多图片上传</button>
                    </div>
                </div>
                <ul id="imgZmList"></ul>
            </div>
        </div>
        <div id="cropperdiv"></div>
        <!-- 文件上传插件 -->
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">评分</label>
        <div class="layui-input-inline">
            <input type="text" id="grade" name="grade" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">多少人做过</label>
        <div class="layui-input-inline">
            <input type="text" id="up" name="up" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">浏览数</label>
        <div class="layui-input-inline">
            <input type="text" id="viewnum" name="viewnum" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">收藏数</label>
        <div class="layui-input-inline">
            <input type="text" id="favnum" name="favnum" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input type="text" id="outdate" name="outdate" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input type="text" id="status" name="status" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
    </div>
</div>

<script>

    $(function () {
        <!-- 父页面的值,赋值到当前页 -->

        $('#did').val(parent.data.did);
        $('#cid').val(parent.data.cid);
        $('#zid').val(parent.data.zid);
        $('#title').val(parent.data.title);
        $('#thumb').val(parent.data.thumb);

        $('#videourl').val(parent.data.videourl);
        $('#desc').val(parent.data.desc);
        $('#difficulty').val(parent.data.difficulty);
        $('#costtime').val(parent.data.costtime);
        $('#tip').val(parent.data.tip);
        $('#yl').val(parent.data.yl);
        $('#fl').val(parent.data.fl);
        $('#steptext').val(parent.data.steptext);
        $('#steppic').val(parent.data.steppic);
        $('#grade').val(parent.data.grade);
        $('#up').val(parent.data.up);
        $('#viewnum').val(parent.data.viewnum);
        $('#favnum').val(parent.data.favnum);
        $('#outdate').val(parent.data.outdate);
        $('#status').val(parent.data.status);


        // let imgHtml = '<li style="position:relative"><img name="imgZmList" src="' +parent.data.thumb+
        //      '"width="150" height="113"><!--<div class="title_cover" name="imgZmName" onclick="divClick(this)"></div>--><div class="img_edit layui-icon" onclick="croppers_pic(this)"></div><div class="img_close" onclick="deleteElement(this)">X</div></li>';
        //  $('#imgZmList').html(imgHtml);
        //  //可移动
        //  imgMove("imgZmList");

        $('#thumbImg').attr("src", parent.data.thumb);
        // 图片回显
        let imgsArray = parent.data.steppic.split("#");
        let imgHtml = "";
        for (let i = 0; i < imgsArray.length - 1; i++) {
            imgHtml += '<li style="position:relative"><img name="imgZmList" src="' + imgsArray[i] +
                '"width="150" height="113"><!--<div class="title_cover" name="imgZmName" onclick="divClick(this)"></div>--><div class="img_edit layui-icon" onclick="croppers_pic(this)"></div><div class="img_close" onclick="deleteElement(this)">X</div></li>';
        }
        $('#imgZmList').html(imgHtml);
        //可移动
        imgMove("imgZmList");
    });


    layui.use(['form', 'upload'], function () {
        var form = layui.form
            , $ = layui.jquery
            , upload = layui.upload;
        //监听提交
        form.on('submit(layuiadmin-app-form-submit)', function (data) {
            //图片 -> 获取图片
            let urls = getPicSort();
            let urlsArray = urls.split(",");
            //
            let steppic = "";
            for (let i = 0; i < urlsArray.length; i++) {
                steppic += urlsArray[i] + "#";
            }
            data.field.steppic = steppic;

            //
            data.field.id = parent.data.id;
            //data.field.id = parent.data.id;
            let result = Ajax.put(path + "/admin/caipu/cpInfo/upd", data.field);
            let index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            parent.layer.msg(result.msg);
            //重载表格
            parent.xijiaRenderTable();
        });


        /**
         *多图片上传( addZmImg 支持图片删除,剪辑重传)
         */
        upload.render({
            elem: '#addZmImg'
            , url: path + '/aliOssFile/upload?filePath=image/config/'
            , multiple: true
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                // obj.preview(function (index, file, result) {
                //     $('#imgZmList').append('<li style="position:relative"><img name="imgZmList" src="' + result + '"width="150" height="113"><!--<div class="title_cover" name="imgZmName" onclick="divClick(this)"></div>--><div class="img_edit layui-icon" onclick="croppers_pic(this)"></div><div class="img_close" onclick="deleteElement(this)">X</div></li>');
                //     form.render();
                //     imgMove("imgZmList");
                // });
            }
            , done: function (result) {
                //上传完毕
                //layer.msg(res.msg);
                console.log("上传文件：" + result.data + "  结果:" + result.msg);

                $('#imgZmList').append('<li style="position:relative"><img name="imgZmList" src="' + result.data + '"width="150" height="113"><!--<div class="title_cover" name="imgZmName" onclick="divClick(this)"></div>--><div class="img_edit layui-icon" onclick="croppers_pic(this)"></div><div class="img_close" onclick="deleteElement(this)">X</div></li>');
                form.render();
                imgMove("imgZmList");
            }
        });


        //文件上传--设定文件大小限制
        layui.upload.render({
            elem: '#test7'
            , url: '/aliOssFile/upload?filePath=image/head/' //改成您自己的上传接口
            , size: 200 //限制文件大小，单位 KB
          , headers: {"TOKEN": getGlobalHeaders()}
            , done: function (res) {
                //如果上传失败
                if (res.code !== 200) {
                    return layer.msg('上传失败-' + res.msg);
                }
                $("#thumbImg").attr("src", res.data);
                $("#thumbImg").attr("title", res.date);
                //赋值input
                $("#thumb").val(res.data);
                console.log(res);
                layer.msg('上传成功');
            }
        });
    });
</script>
</body>
</html>
